<template>
  <div class="volume" :class="{'no-volume': data.length == 0}">
         <div v-for="(item, index) in data" class="volume-box" :class="{'volume-box-yellow': item.couponType == '10004' || item.couponType == '10005' || item.couponType == '10006', 'volume-box-blue': item.couponType == '10009' || item.couponType == '10010' || item.couponType == '10011' || item.couponType == '10012', 'volume-box-red': item.couponType == '10001' || item.couponType == '10002' || item.couponType == '10003', 'expired': expiredClass}"   :key="item.id">
            <img src="/static/images/volume-l.png" alt="" class="volume-i-left">
            <div @click="volumeInfo(item)">
                <div class="clear">
                    <div class="volume-box-left volume-box-info">
                        <h2>{{item.couponRuleName}}</h2>
                        <p class="volume-box-mj">{{item.promotionLabel}}</p>
                        <p class="volume-box-time">
                          {{item.startTime?item.startTime.split(' ')[0].replace(/-/g,'.'): ''}}&nbsp;-&nbsp;{{item.endTime?item.endTime.split(' ')[0].replace(/-/g,'.'): ''}}
                        </p>
                    </div>
                    <div class="volume-box-right volume-box-price">
                         <i>&yen;</i>
                         <!-- <span>{{+item.remainValue? (item.remainValue | formatPrice): (item.couponValue | formatPrice)}}</span> -->
                         <span v-if="+item.remainValue">{{item.remainValue | formatPrice}}</span>
                         <span v-if="!item.remainValue">{{item.couponValue | formatPrice}}</span>
                    </div>
                </div>
                <div class="line"></div>
                <div class="volume-box-left">
                    <span class="volume-box-indu">{{item.couponRulesShowMsg}}</span>
                </div>
                <div class="volume-box-right volume-box-out" v-if="item.isWillExpire == '1'">
                    <span>即将过期</span>
                </div>
            </div>
            <a href="#/index/snxd_index_jx" v-if="!expiredClass">
              <div class="volume-r-bg" :class="'volume-r-bg'+item.couponStatus">
              </div>
           </a>
          <div class="volume-r-bg" :class="'volume-r-bg'+item.couponStatus" v-if="expiredClass">
          </div>
         </div>

         <div  v-if="data.length == 0" class="no-volume-box">
             <img src="/static/images/no-volume.png" alt="">
             <p v-html="info"></p>
         </div>


  </div>
</template>
<script>
 import { centerCouponInfo } from '@/service/getData'
 import { cookie } from 'vux'
  export default {
    props:['data', 'info', 'expiredClass'],
    data(){
      return{

      }
    },
    methods:{
      volumeInfo(data){
        var data1;
        if(this.$route.params.type ==  'store') {
            data1 = data
            sessionStorage.vi = JSON.stringify(data1)
            this.$router.push('/volumeinfo/')
        } else if (this.$route.params.type ==  'center') {

              centerCouponInfo({
                couponNo: data.couponId,
                couponRulesId: data.couponRuleId,
                memberId: cookie.get('custno') || '' ,
                partScopeQuantityLimitNumber: 2000,
                sourceSystem: 3
              })
              .then((rep) => {
                  if(rep.data && rep.data.couponRulesTerminalList){
                    var arr = [];
                    for(var i = 0; i < rep.data.couponRulesTerminalList.length; i++) {
                        arr.push(rep.data.couponRulesTerminalList[i].couponRulesTerminalName)
                    }
                    data.couponRulesTerminalName = arr.join(',')
                  }
                  data1 = data
                  sessionStorage.vi =  JSON.stringify(data1)
                  this.$router.push('/volumeinfo')
              })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }
  .volume {
    text-align: center;
    padding-bottom: 1rem;
  }
  .volume-box {
      position: relative;
      width: _(606);
      height: _(219);
      background-color: #fff;
      display: inline-block;
      margin:_(28) 0 0 _(-80);

      img {
        height: 100%;
        width: auto !important;
      }

      .volume-i-left {
          position: absolute;
          top: 0;
          left: _(-5);
      }


      .volume-box-info {
        margin-left: _(35);
        text-align: left;
              h2 {
                max-width: 6.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: pre;
                font-size: _(30);
                color:#333333;
                height: _(42);
                line-height: _(42);
              }
              .volume-box-mj {
                font-size: _(22);
                color:#ffc001;
              }

              .volume-box-time {
                font-size: _(22);
                color:#bbbbbb;
              }
      }
      .volume-box-price {
          margin-top: _(15);
          margin-right: _(25);
          height: _(88);
          line-height: _(88);
          color: #FFC001;
          i {
              font-size: _(40);
              letter-spacing: _(-0.25);
              text-align:left;
          }
          span {
            font-size: _(60);
            letter-spacing: _(-0.43);
            text-align: left;

          }
      }


      .volume-box-indu {
          display: inline-block;
          margin-left: _(35);
          height: _(30);
          line-height: _(30);
          margin-top: _(21);
          font-size: _(22);
          color:#444444;
          letter-spacing: _(-0.14);
          text-align:left;
      }
      .volume-box-out {
        width: _(102);
        height: _(32);
        line-height: _(32);
        margin-top: _(18);
        margin-right: _(31);
        color: #ffc001;
        border:1px solid #ffc001;;
        font-size: _(18);
        border-radius: _(2);
     }

     .volume-r-bg {
        position: absolute;
        width: _(80);
        top: 0;
        right: _(-80);
        height: _(218);
        background-image: url('/static/images/volume-1.png');
        background-size: 100%;
     }
  }
  .volume-box-left {
    float: left;
  }
  .volume-box-right {
    float: right;
  }
  .clear {
    overflow: hidden;
    padding-top: _(28);
  }
  .line {
    width: _(580);
    height: 1px;
    margin: _(12) auto 0;
    background-color: #eeeeee;
  }
  .volume-box-yellow {
      .volume-box-info .volume-box-mj, .volume-box-price, .volume-box-out {
            color: #ffc001;
      }
      .volume-box-out {
          border: 1px solid #ffc001;
      }
      .volume-r-bg {
        background-image: url('/static/images/volume-1.png');
      }
  }
  .volume-box-blue {
      .volume-box-info .volume-box-mj, .volume-box-price, .volume-box-out {
            color: #7ed321;
      }
      .volume-box-out {
          border: 1px solid #7ed321;
      }
      .volume-r-bg {
        background-image: url('/static/images/volume-2.png');
      }
  }
    .volume-box-red {
      .volume-box-info .volume-box-mj, .volume-box-price, .volume-box-out {
            color: #ff782d;
      }
      .volume-box-out {
          border: 1px solid #ff782d;
      }
      .volume-r-bg {
        background-image: url('/static/images/volume-3.png');
      }
  }
.expired {
      div,h2,i,span,a,p {
        color: #bbb !important;
      }
      .volume-r-bg5 {
        background-image: url('/static/images/expire-2.png');
      }
      .volume-r-bg4, .volume-r-bg3 {
        background-image: url('/static/images/expire-1.png');
      }
}
.no-volume {
  height: 100%;
  position: relative;
  text-align: center;
  padding-bottom: 0;
    .no-volume-box {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      height: _(160);
      margin-top: _(-100);
      img {
        width: _(185);
        display: inline-block;
      }
      p {
        font-size: _(26);
        margin-top: _(40);
        color: #999;;
        letter-spacing: _(-0.16);
      }
    }
}
</style>
